<div class="row">
  <div class="col-md-5 text-center">
    <div class="text-left sub_titulo"><h3>{$Tr->_('reports')}</h1></h3></div>
  </div>
</div>
<div class="row">
    <div class="col-md-6 text-center">
        <h4>Recaudación por Evento</h4>
        <table class="table">
            <tr style="background-color: #000870;"><th>Evento</th><th>Cantidad Entradas</th><th>Monto Total</th></tr>
        {foreach $compraXEvento as $compra } 
            <tr><td>{$compra.nombre}</td><td>{$compra.cantidad}</td><td>{$compra.monto}</td></tr>
        {/foreach}      
        </table>
    </div>
    <div class="col-md-6 text-center">
      <div id="piechart" style="width: 500px; height: 500px;"><img src="../loading3.gif" width="100"></div>
    </div>
    
</div>
<div class="row">
  <div class="col-md-6 text-center">
        <h4>Recaudación por Categoria</h4>
        <table class="table">
            <tr style="background-color: #000870;"><th>Categoria</th><th>Cantidad Entradas</th><th>Monto Total</th></tr>
        {foreach $compraXCategoria as $compra } 
            <tr><td>{$compra.nombre}</td><td>{$compra.cantidad}</td><td>{$compra.monto}</td></tr>
        {/foreach}      
        </table>
    </div>
  <div class="col-md-6 text-center">
      <div id="piechart2" style="width: 500px; height: 500px;"><img src="../loading3.gif" width="100"></div>
  </div>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
{literal}
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
{/literal}    
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
  {foreach $compraXEvento as $compra }      
      ['{$compra.nombre}',  {$compra.cantidad}],
  {/foreach}
    ]);
{literal}
    var options = {
      title: 'Ventas por evento',
      is3D: true,
      legend: {alignment: 'end'},
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  }

  google.setOnLoadCallback(drawChart2);
  function drawChart2() {
{/literal}    
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
  {foreach $compraXCategoria as $compra }      
      ['{$compra.nombre}',  {$compra.cantidad}],
  {/foreach}
    ]);
{literal}
    var options = {
      title: 'Ventas por categoia',
      is3D: true,
      legend: {alignment: 'end'},
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
    chart.draw(data, options);
  }
{/literal}
</script>
